<template>
	<view>
		<view class="header-con">
			<view class="header-tab">
				<tabs ref="tabsRef" :list="tablist" @tabItemClick="tabSelect" marright="70rpx" activeWeight='700'
					fontSize="32rpx" barMargin="10" activeColor="#000" activeBarColor="#53A87F" :current="1"></tabs>
			</view>
		</view>
		<view class="coupon-con" :class="{emptyActives:loadedList&&discountData.length<=0}">
			<scroll-view class="uni-bar-wbg" style="height:100%" scroll-y scroll-with-animation refresher-enabled="true"
				:refresher-triggered="refLoad" @refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
        <empty positions="absolute" :empty="loadedList&&discountData.length<=0" :zIndexs="100"
        	:imgUrl="'https://cdn-static.yekjx.com/'+'food/empty/images/empty_ico04.png'" content="暂无优惠券"></empty>
				<view class="cu-bar-yhj" v-for="item in discountData" :key="item.id">
					<view class="cu-bar-yhj-left">
						<view class="cu-bar-yhj-Pic"
							:class="{'gray-element':item.invalid || item.statue=='146' || !item.scopChan}">
							<view class="cu-bar-yhj-PicStyle">
								{{ item.money }}
								<text v-if="item.type=='0'" class="cu-bar-yhj-PicZk">折</text>
								<text v-else class="cu-bar-yhj-PicZk">元</text>
							</view>
							<view class="cu-bar-yhj-min"><text>{{ item.content }}</text></view>
						</view>
						<view class="cu-bar-yhj-left-text padding-left-sm padding-top">
							<view class="cu-bar-yhj-title padding-right-sm"
								:class="{'gray-color':item.invalid || item.statue=='146'||!item.scopChan}">
								{{ item.title }}
							</view>
							<view class="flex justify-between align-center padding-right">
								<text class="cu-bar-yhj-left-time">有效期至{{ item.validity }}</text>
								<view class="cu-bar-yhj-right" @click="clipCoupons(item)">
									<text v-if="(!item.invalid || item.statue=='146') && item.scopChan"
										class="cu-bar-yhj-rightBtn"
										:class="{'gray-element':item.invalid,'alreadyClass':item.statue =='146'}">{{item.statue == '146' ? '已使用' : '去使用'}}</text>
									<text v-if="item.invalid" class="cu-bar-invalid">已过期</text>
								</view>
							</view>
							<view class="padding-top-zdy padding-top-xs">
								<view class="flex justify-between align-center">
									<!-- <text v-if="item.ttyy" class="ttyyTextStyle">{{item.ttyyText}}</text> -->
									<view class="ttyyTextStyle flex-sub">
										<text v-if="!item.scopChan&&item.labels">
											<text class="fcon-weibiaoti01" style="margin-right: 6rpx;"></text>
											{{`仅限${item.labels}使用`}}
										</text>
									</view>
									<view class="cu-bar-yhj-left-rule point" @click="showMore(item)">
										详细说明<text class="lg text-gray margin-left-xs inblcok" :class="item.show?'cuIcon-fold':'cuIcon-unfold'"></text>
									</view>
								</view>
								<view class="rule-con-ul padding-right-sm">
									<view class="rule-con" :class="{activeWy : item.show}">
										{{item.ruleDesc}}
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="flex justify-center">
					<uni-load-more :status="loadStatus" iconType="circle"></uni-load-more>
				</view>

			</scroll-view>
		</view>
		<loading></loading>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onShow, onLoad } from '@dcloudio/uni-app';
	import { showLoading, hideLoading, mnavTo } from '@/utils/helper';
	import { getCouponList } from '@/api/vmeitime-http/index.js';
	import mapi from '@/utils/mapi';
	import tabs from '@/components/comtabs/comtabs.vue';
	const loadedList = ref(false)//是否加载
	const tabsRef = ref()
	const refLoad = ref(false)
	const nowChangeState = ref('')
	const loadStatus = ref('noMore')
	const pageInfo = ref({
		curPage: 1,
		pageSize: 10,
		backCupPage: 2
	})
	const tablist = ref([
		{
			orderState: "",
			name: "全部"
		}, {
			orderState: 142,
			name: "待使用"
		}, {
			orderState: 146,
			name: "已使用"
		}, {
			orderState: 141,
			name: "失效"
		}
	])

	// 优惠券数据
	const discountData = ref<any>([])

	onShow(() => {
		nowChangeState.value = "142"
		loadList('refresh')
	})
	const tabSelect = (item : any, index : any) => {
		nowChangeState.value = item.orderState
		loadList('refresh')

	}

	const refresherrefresh = () => {
		refLoad.value = true
		setTimeout(() => {
			refLoad.value = false
		}, 500)
		loadList('refresh')
	}
	const scrolltolower = () => {
		loadList('add')
	}
	const loadList = async (source : any) => {
		loadStatus.value = 'loading'
		if (source == 'refresh') {
			pageInfo.value.curPage = 1
			pageInfo.value.backCupPage = 2
		}
		if (pageInfo.value.curPage > pageInfo.value.backCupPage && source != 'refresh') {
			console.log("没有更多啦")
			loadStatus.value = 'noMore'
			return
		}
		showLoading()
		try {
			let res = await getCouponList({ vstatus: nowChangeState.value, pageSize: pageInfo.value.pageSize, curPage: pageInfo.value.curPage })
			loadedList.value = true
			hideLoading()
			if (!res.result) {
				mapi.msg(res.shortMessage||'网络繁忙，请稍后再试',res.code)
				return
			}
			if (pageInfo.value.curPage == res.page.totalPage) {
				loadStatus.value = 'noMore'
			} else {
				loadStatus.value = 'more'
			}
			pageInfo.value.curPage += 1
			pageInfo.value.backCupPage = res.page.totalPage || 0

			if (source == 'refresh') {
				discountData.value = []
			}
			res.object.data.forEach((item : any, index : any) => {
				const {
					par_value,
					ncoupon_money,
					coupon_type_two,
					vname,
					vend_date,
					coupon_type,
					vstatus,
					ruleDesc,
					scope_channel,
					ext
				} = item;
				discountData.value.push({
					id: index,
					money: coupon_type_two == '970'?parseRate(par_value||0):ncoupon_money,
					type: coupon_type_two == '970' ? '0' : '1',
					title: vname,
					validity: `${vend_date.slice(0, 4)}.${vend_date.slice(4, 6)}.${vend_date.slice(6, 8)}`,
					content: coupon_type == '870' ? '全场通用' : coupon_type == '869' ? '商品券' : coupon_type == '868' ? '现金券' : '',
					select: false,
					invalid: vstatus == '141' ? 1 : 0,
					statue: vstatus,
					ttyy: 0,
					ruleDesc: ruleDesc,
					scopChan: getScops(scope_channel),//该代金券在顿大侠是否能用
					labels: ext.scope_channel_label||''
				});
			});
		} catch (e) {
			//TODO handle the exception
			loadedList.value = true
			loadStatus.value = 'noMore'
			hideLoading()
		}
	}
	const getScops = (items : any) => {
		if (items != null) {
			let scopeArray = items.split(',');
			let containsTarget = scopeArray.includes('1114');
			if (containsTarget) {
				return true
			} else {
				return false
			}
		} else {
			return true
		}
	}
	const showMore = (list : any) => {
		if (list.invalid) return
		discountData.value.forEach((item) => {
			if (item.id === list.id) {
				// 将当前项的menuFlag设置为true
				item.show = !item.show;
			} else {
				// 将其他项的menuFlag设置为false（或不设置，根据你的需求）
				// item.show = false;
			}
		});

	}
	const parseRate = (value : any) => {
		if (!isNaN(value)) {
			let num = value * 100;
			num = num % 10 === 0 ? num / 10 : num
			return num
		} else {
			return 0
		}
	}
	//使用优惠劵
	const clipCoupons = (list : any) => {
		if (list.invalid || list.statue == '146') return
		uni.switchTab({
			url: "/pages/index/home/home"
		})
	}
</script>

<style lang="scss" scoped>
  .emptyActives{
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
	.header-con {
		width: 100%;
		position: sticky;
		top: 0;
		background-color: #fff;
		z-index: 9999;
	}

	.coupon-con {
		width: 100vw;
		padding: 20rpx;
		height: calc(100vh - 87rpx);
		position: relative;
	}

	.ttyyTextStyle {
		// color: #FF6868;
		color: #666;
		font-family: "Microsoft YaHei UI";
		font-size: 28rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}

	.cu-bar-invalid {
		color: #FFF;
		font-family: "Microsoft YaHei UI";
		font-size: 24rpx;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		background-color: #C4C4C4 !important;
		position: absolute;
		width: 40%;
		height: 40rpx;
		justify-content: center;
		align-items: center;
		display: flex;
		transform: rotate(45deg);
		right: -61rpx;
		top: 20rpx;
	}

	.gray-element {
		filter: grayscale(100%);
	}

	.alreadyClass {
		color: #fff !important;
		background-color: #C4C4C4 !important;
	}

	.gray-color {
		color: #999 !important;
	}

	.uni-bar-wbg {
		.cu-bar-yhj {
			border-radius: 8rpx;
			background: #FFF;
			box-shadow: 0px 0px 10px 0px rgba(212, 219, 238, 0.80);
			// min-height: 180.744rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 30rpx;
			align-items: center;
			transition: all .5s;
			overflow: hidden;
			position: relative;

			// &:last-child{
			//   margin-bottom: 0;
			// }
			.cu-bar-yhj-right {
				display: flex;
				align-items: center;
				margin-right: -10rpx;

				.cu-bar-yhj-rightBtn {
					width: 142rpx;
					height: 72rpx;
					border-radius: 36rpx;
					background: #E4F8E4;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					color: #56BF7A;
				}
			}

			.cu-bar-yhj-left {
				display: flex;
				width: 100%;

				.cu-bar-yhj-left-text {
					justify-content: space-between;
					padding-bottom: 10rpx;
					position: relative;
					display: flex;
					flex-direction: column;
					flex: 1;

					.activeWy {
						transform: translateY(0%) !important;
						opacity: 1 !important;
						height: auto !important;
						transition: all 0.1s ease-out;
					}

					.rule-con-ul {
						overflow: hidden;
					}

					.ruleconulptop {
						padding-top: 20rpx;
					}

					.rule-con {
						width: 100%;
						color: #999;
						font-size: 24rpx;
						letter-spacing: 0.24px;
						transform: translateY(-120%);
						transition: all .5s;
						height: 0;
						opacity: 0;
						// transform: scale(0);
						// transition: all .5s;
					}

					.ruleActive {
						// height: 100%;
						transform: scale(1);
					}
				}

				.cu-bar-yhj-Pic {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					min-width: 202rpx;
					border-radius: 4px 0px 0px 4px;
					position: relative;
					// background: url('https://cdn-static.yekjx.com/food/images/car_img08.png');
					// background-repeat: repeat-y;
					background-color: #FFF0F0;
					z-index: 12;

					&::before {
						content: '';
						width: 20rpx;
						height: 100%;
						position: absolute;
						right: -7rpx;
						top: 0;
						background-size: 25rpx 25rpx;
						background-image: radial-gradient(#fff 8rpx, transparent 6rpx);
						background-repeat: repeat-y;
					}
				}

				.cu-bar-yhj-pic-Invalid {
					background-color: #F5F5F5;
				}

				.cu-bar-yhj-PicStyle {
					color: #FF6868;
					font-size: 60rpx;
					font-weight: 700;

					.cu-bar-yhj-PicZk {
						font-weight: 400;
						// margin-left: -10rpx;
						font-size: 24rpx;
					}
				}

				.cu-bar-yhj-min {
					color: #FF6868;
					font-size: 24rpx;
					font-weight: 400;
					letter-spacing: 0.24px;
				}

				.cu-bar-yhj-left-text {
					display: flex;
					flex-direction: column;

					.cu-bar-yhj-title {
						color: #333;
						font-size: 32rpx;
						font-weight: 700;
						margin-bottom: 10rpx;
					}

					.cu-bar-yhj-left-time {
						color: #666;
						font-size: 28rpx;
						font-weight: 400;
						margin-top: 10rpx;
					}

					.cu-bar-yhj-left-rule {
						color: #999;
						font-size: 24rpx;
						display: inline-block;
						padding: 14rpx 20rpx;
					}

					.routerHover {
						transform: rotate(180deg);
					}
				}
			}
		}
	}

	.justiftRight {
		justify-content: flex-end !important;
	}
</style>